<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />

</head>

<body>

    <h1>JavaScript 变量</h1>

    <h2>注释</h2>
    <p>以//开头直到行末的字符被视为行注释，注释是给开发人员看到，JavaScript引擎会自动忽略</p>
    <p>另一种块注释是用/*...*/把多行字符包裹起来，把一大"块"视为一个注释</p>

    <h2>变量</h2>
    <p>通俗一点解释，变量的意思，就是一个可变的量。在计算机运算过程中，我们需要定义一个“变量”来存储我们的计算过程，用于计算出最终的结果。</p>
    <p>变量的定义方式有：<strong>var</strong>, <strong>let</strong>, <strong>const</strong>三种方式。</p>
    <p>具体的表现为:</p>
    <pre>
var paramVar = 1;
let paramLet = "I am paramLet";
const PARAM_CONST = 3.1415;
    </pre>

    <p>上面的代码解释为：</p>
    <ol>
        <li>var、let、const 就是用于告诉我们的计算机，接来下我要定义一个变量了。</li>
        <li>paramVar、paramLet、PARAM_CONST就是我们给这个变量取的名字，就好像阿猫、阿狗那种。</li>
        <li>1、"I am paramLet"、3.1415这些就是我们的变量值，通过数据类型进行分类。</li>
        <li>"="号就是我们所谓的赋值操作，意思是将变量值与我们的变量进行绑定。</li>
    </ol>


    <p>其中，变量的定义方式解释如下（其中涉及作用域问题，可参考作用域的内容）：</p>
    <ul>
        <li><strong>var</strong> 用于定义可变的变量</li>
        <li><strong>let</strong> 用于定义可变的变量，与var的区别在于作用域等，是var更严谨的写法</li>
        <li><strong>const</strong> 用于定义不可变的常量，即变量值无法被修改。</li>
    </ul>

    <h2>变量名</h2>
    <p>变量名的定义有以下规则：</p>
    <ul>
        <li>首字母必须是字母、下划线（-）或者美元符号（$）</li>
        <li>其他字母可以是下划线（_）、美元符号（$）、字母或者数字</li>
        <li>一般采用驼峰法：第一个字母小写，其余有意义的单词首字母大写</li>
        <li>变量名是区分大小写的，不能是关键字或保留字（这里不需要了解，可查阅更多资料）</li>
    </ul>

    <h2>变量值与数据类型</h2>
    <h3>Number</h3>
    <p>我们数学上的整数、负数、浮点数等，在JavaScript对应的数据类型就是Number类型。 类似于上面的 1、3.1415. </p>

    <h3>字符串</h3>
    <p>字符串即为我们常见的文本文字，通常用"" 或者''包裹起来表示，如上面的"I am paramLet"， 就是指的就是<strong>I am paramLet</strong>的文字</p>

    <h3>布尔值</h3>
    <p>布尔值为true和false，即对和错。当我们计算器在运算过程中遇到选择或者输出一个对错结果时，常会用到。</p>

    <h3>null和undefined</h3>
    <p>null表示一个空的值，而undefined表示值未定义，作为初学者，如果你碰到这2个值且发现程序没有正常运行，则可以去检查一下代码了。</p>

    <h3>对象</h3>
    <p>JavaScript的对象是一组由键-值组成的无序集合</p>
    <pre>
var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};
    </pre>

    <p>如上面的代码而言，定义了一个person的变量，它存储的就是一个由键-值组成的无序集合，由{}来进行表示。</p>
    <p>而内部的就又是我们所谓的变量合集，如：</p>
    <ul>
        <li><strong>name: 'Bob'</strong>变量为name，变量值为字符串类型，Bob</li>
        <li><strong>age: 20</strong>变量为age，变量值为Number类型，20</li>
        <li><strong>tags: ['js', 'web', 'mobile']</strong>变量为tags，变量值为数组类型，['js', 'web', 'mobile']</li>
        <li><strong>city: 'Beijing'</strong>变量为city，变量值为字符串类型，Beijing</li>
        <li><strong>hasCar: true</strong>变量为hasCar，变量值为布尔类型，true</li>
        <li><strong>zipcode: null</strong>变量为zipcode，变量值为null，表示一个空的值</li>
    </ul>


    <h3>数组、Map、Set</h3>
    <p>这部分内容，在数组集合中进行解释。这里可以简单理解为多个变量值的合集。</p>

    <h3>逻辑运算</h3>
    <p>逻辑运算，常用于计算过程中多个条件的碰撞，从而计算出正确的结果。</p>

    <ul>
        <li>使用<strong>&&</strong>, 表示与运算，只有所有都为true，&&运算结果才是true</li>
        <li>使用<strong>||</strong>, 表示或运算，只要其中有一个为true，||运算结果就是true</li>
        <li>使用<strong>&&</strong>, 表示非运算，它是一个单目运算符，把true变成false，false变成true</li>
    </ul>

    <pre>
// && 示例
true && true; // 这个&&语句计算结果为true
true && false; // 这个&&语句计算结果为false
false && true && false; // 这个&&语句计算结果为false

// || 示例
false || false; // 这个||语句计算结果为false
true || false; // 这个||语句计算结果为true
false || true || false; // 这个||语句计算结果为true

// ! 示例
! true; // 结果为false
! false; // 结果为true
! (2 > 5); // 结果为true
    </pre>

    <h3>比较运算符</h3>
    <p>比较运算符，常用于计算过程中多个条件的碰撞，从而计算出正确的结果。</p>

    <pre>

2 > 5; // false
5 >= 2; // true
7 == 7; // true

// ==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果
false == 0; // true

// ===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
false === 0; // false
    </pre>

    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://www.liaoxuefeng.com/wiki/1022910821149312/1023442583285984">JavaScript 基本语法</a></li>
        <li><a target="_blank" href="https://www.liaoxuefeng.com/wiki/1022910821149312/1023020925712064">JavaScript 数据类型和变量</a></li>
    </ul>
</body>

</html>